<template>
  <div>
    <el-table
      stripe
      border
      :data="tasksForUserList"
      :highlight-current-row="false"
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      v-loading="loading"
      class="customer-task-table">
      <el-table-column
        v-for="(column, index) in columns"
        :key="`${column.field}_${index}`"
        :label="column.label"
        :prop="column.field"
        :min-width="column.width"
        :class-name="column.field == 'taskNo' ? 'customer-task-name-superscript-td' : ''"
        :sortable="column.sortable"
        :show-overflow-tooltip="column.field !== 'taskNo'"
        :align="column.align">
        <template slot-scope="scope">
          <template v-if="column.field === 'templateId'">
            {{scope.row.templateName}}
          </template>
          <template v-else-if="column.field === 'suggestion'">
            {{scope.row.suggestion}}
          </template>
          <template v-else-if="column.field === 'taskNo'">

            <sample-tooltip :row="scope.row">
                <template slot="content" slot-scope="{isContentTooltip}">
                  <el-tooltip :content="scope.row[column.field]" placement="top" :disabled="!isContentTooltip">
                    <a 
                      href="#" 
                      @click="openDetail(scope.row, `/task/view/${scope.row.id}`)" 
                      class="task-link">
                      {{scope.row[column.field]}}
                    </a>
                  </el-tooltip>
                </template>
              </sample-tooltip>

          </template>
          <template v-else-if="column.field === 'createTime'">
            {{scope.row.createTime | fmt_datetime}}
          </template>
          <template v-else-if="column.field === 'completeTime'">
            {{scope.row.completeTime | fmt_datetime}}
          </template>
          <template v-else>
            {{scope.row[column.field]}}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageNum"
      @current-change="jump"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as DeptHomeApi from "@src/api/DeptHomeApi";
import TaskStateEnum from '@model/enum/TaskStateEnum.ts';
import Platform from '@src/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
import { t } from '@src/locales'

export default {
  name: "dept-tasks-list",
  props: {
    detailId: {
      type: String,
      default: "",
    },
    isFromUserView: {
      type: Boolean,
      default: false,
    },
    isShowProduct: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tasksForUserList: [], // 成员列表
      pageInfo: {
        // 分页
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总数
      loading: false,
      columns: this.buildColumns().filter(x=>x.show)
    };
  },
  mounted() {
    this.getDeptTasksForUserView();
  },
  methods: {
    // 部门主页工单列表
    getDeptTasksForUserView() {
      this.loading = true;
      const params = { ...this.pageInfo };
      if(this.isFromUserView) {
        params.executor = this.detailId;
      } else {
        params.tagId = this.detailId;
      }
      DeptHomeApi.getDeptTasksForUserView(params).then((res) => {
        this.tasksForUserList = res.list.map(x=>{
          x.state = TaskStateEnum.getName(x.state);
          return x;
        });

        this.total = res.total;
        this.loading = false;
      }).catch(e=>{
        this.loading = false;
        console.error('fetch task caught e', e)
      })
    },
    jump(e) {
      this.pageInfo.pageNum = e;
      this.getDeptTasksForUserView();
    },
    // 跳转工单详情
    openDetail(row, url){
      if (!window.frameElement) return;

      let fromId = window.frameElement.getAttribute('id');

      //TODO: 统一id命名
      // Platform.openTab({
      //   id: "taskView_" + row.id,
      //   title: `工单${row.taskNo}`,
      //   close: true,
      //   url,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.id,
        titleKey: row.taskNo,
        fromId
      })
    },
    buildColumns() {
      return [{
        label: t('common.label.taskNo'),
        field: 'taskNo',
        show: true,
        width:'150px',
      }, {
        label: t('common.label.taskTemplate'),
        field: 'templateId',
        show: true,
        width:'100px',
      }, {
        label: t('common.label.productName'),
        field: 'productName',
        show: (this.isFromUserView && this.isShowProduct) || !this.isFromUserView,
      }, {
        label: t('common.label.taskStatus'),
        field: 'state',
        show: true,
        width:'100px',
      }, {
        label: t('common.label.createTime'),
        field: 'createTime',
        show: true,
        width:'120px',
      }, {
        label: t('common.label.finishTime'),
        field: 'completeTime',
        show: true,
        width:'120px',
      }, {
        label: t('common.label.customerEvaluation'),
        field: 'suggestion',
        show: true,
        width:'100px',
      }]
    }
  },
};
</script>

<style lang="scss" scoped>
.task-link {
  @include fontColor();
}
</style>